<!--
 * @Description: 组织机构页面
 * @Author: Liu Zhiwang
 * @Date: 2021-04-29 11:24:46
 * @LastEditTime: 2021-10-14 10:49:12
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="organization-content">
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/ywzt/ywzt-index-background.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/organization" />
    <!-- 顶部导航栏 -->
    <main class="main">
      <div class="container">
        <div class="title">组织机构</div>
        <section class="section-box">
          <el-scrollbar class="section-left">
            <div class="section-left-li menu-have-submenu">
              <svg-icon icon-class="menu-have-submenu" />
              <span>供电部</span>
            </div>
            <div
              v-for="item in deptData.topList"
              :key="item.id"
              class="section-left-li menu-no-submenu"
              :class="{'active': activeDeptId==item.id}"
              @click="changeDeptId(item)"
            >
              <svg-icon icon-class="menu-no-submenu" />
              <span>{{ item.deptName }}</span>
            </div>
            <div class="section-left-li">
              <svg-icon icon-class="menu-have-submenu" />
              <span>供电设备管理单位</span>
            </div>
            <div
              v-for="item in deptData.downList"
              :key="item.id"
              class="section-left-li menu-no-submenu"
              :class="{'active': activeDeptId==item.id}"
              @click="changeDeptId(item)"
            >
              <svg-icon icon-class="menu-no-submenu" />
              <span>{{ item.deptName }}</span>
            </div>
          </el-scrollbar>
          <div class="section-right">
            <div class="section-right-tabs">
              <div :class="{'active': tabsShow==1}" @click="tabsShow=1;">部门职责</div>
              <div :class="{'active': tabsShow==2}" @click="tabsShow=2;">人员情况</div>
            </div>
            <el-scrollbar ref="scrollbar" v-loading="listLoading" class="section-right-scrollbar">
              <div v-if="tabsShow==1" class="section-right-con deptDuty">
                <div v-html="deptDuty" />
                <div v-if="!deptDuty" class="null">暂无数据</div>
              </div>
              <div v-if="tabsShow==2" class="section-right-con">
                <div v-for="item in staffData" :key="item.id" class="section-right-con-li">
                  <div class="portrait">
                    <viewer ref="viewer" :images="[getImageUrl(item.portraitPath)]" @inited="inited">
                      <img v-if="item.portraitPath" :src="getImageUrl(item.portraitPath)" alt="">
                      <img v-else src="../../../assets/images/default-avatar.jpg" alt="">
                    </viewer>
                  </div>
                  <div class="message">
                    <div>
                      <span>姓名：</span>
                      <span>{{ item.staffName }}</span>
                    </div>
                    <div>
                      <span>职务：</span>
                      <span>{{ item.position }}</span>
                    </div>
                    <div>
                      <span>电话：</span>
                      <span>{{ item.phoneNum || item.mobileNum }}</span>
                    </div>
                    <div>
                      <span>分工：</span>
                      <span>{{ item.divideWork }}</span>
                    </div>
                  </div>
                </div>
                <div v-if="!staffData.length" class="null">暂无数据</div>
              </div>
            </el-scrollbar>
          </div>
        </section>
      </div>
    </main>
  </div>
</template>

<script>
import { getDeptListByDeptTypeCode, getSegmentListByDeptId } from '@/api/jjxt/organization';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';

export default {
  name: 'Organization',
  components: {
    TopNavigationBar
  },
  data() {
    return {
      deptData: [],
      staffData: [],
      activeDeptId: '', // 当前部门Id
      deptDuty: '', // 当前部门的部门职责
      tabsShow: 2, // 1:部门职责，2：人员情况
      listLoading: false
    };
  },
  mounted() {
    this.getDeptListByDeptTypeCode();
  },
  methods: {
    changeDeptId(item) {
      if (this.activeDeptId !== item.id) {
        this.activeDeptId = item.id;
        this.deptDuty = item.deptDuty;
        this.getSegmentListByDeptId();
      }
    },
    getImageUrl(path) {
      return (
        process.env.VUE_APP_BASE_API +
        '/dfile/file/download?fileUrl=' +
        path
      );
    },
    getDeptListByDeptTypeCode() {
      getDeptListByDeptTypeCode().then(response => {
        this.deptData = response.data;
        this.activeDeptId = response.data.topList[0].id;
        this.deptDuty = response.data.topList[0].deptDuty;
        this.getSegmentListByDeptId();
      });
    },
    getSegmentListByDeptId() {
      this.listLoading = true;
      getSegmentListByDeptId({ id: this.activeDeptId, isLeaderFlagEnum: 'YES' }).then(response => {
        const el = this.$refs['scrollbar'].wrap;
        el.scrollTop = 0;
        this.staffData = response.data;
        this.listLoading = false;
      }).catch(_ => {
        this.listLoading = false;
      });
    },
    inited(viewer) {
      this.$viewer = viewer;
    }
  }
};
</script>
<style lang="scss" scoped>
.organization-content {
  width: 100%;
  height: 100%;
  .main {
    width: 100%;
    height: calc(100% - 68px);
    padding: 30px 0;
    background: #F1F4FB;
    .container {
      margin: 0px 30px;
      background: #FFFFFF;
      .title {
        position: relative;
        padding: 30px 50px 22px 50px;
        font-size: 24px;
        color: #323232;
        &:after {
          content: '';
          position: absolute;
          left: 28px;
          top: 30px;
          width: 7px;
          height: 26px;
          background-color: #379df9;
          border-radius: 4px;
        }
      }
      .section-box {
        display: flex;
        justify-content: space-between;
        .section-left {
          position: relative;
          width: 214px;
          height: 750px;
          margin-left: 28px;
          font-size: 16px;
          color: #323232;
          background-color: #fcfcfc;
          &:after {
            content: '';
            position: absolute;
            right: 1px;
            top: 0px;
            width: 1px;
            height: 750px;
            background-color: #e9e9e9;
          }
          .section-left-li {
            width: 212px;
            height: 46px;
            padding: 0 20px;
            line-height: 46px;
            span {
              margin-left: 4px;
            }
          }
          .menu-no-submenu {
            padding-left: 42px;
            cursor: pointer;
            &:hover {
              color: #379df9;
              background-color: #e9f2fc;
            }
          }
          .active {
            color: #379df9;
            background-color: #e9f2fc;
            border-right: 4px solid #409eff;
          }
        }
        .section-right-scrollbar{
          height: 708px;
        }
        .section-right {
          flex: 1;
          margin: 0 28px 0 20px;
          .section-right-tabs {
            position: relative;
            display: flex;
              &:after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0px;
              width: 1550px;
              height: 2px;
              background-color: #379df9;
            }
            div {
              width: 98px;
              height: 42px;
              line-height: 42px;
              margin-right: 12px;
              font-size: 16px;
              color: #646464;
              text-align: center;
              cursor: pointer;
              background-color: #e2f0fd;
              border-radius: 4px 4px 0px 0px;
              /*
              &:hover {
                color: #FFFFFF;
                background-color: #379df9;
              }
              */
            }
            .active {
              color: #FFFFFF;
              background-color: #379df9;
            }
          }
          .section-right-con {
            display: flex;
            flex-wrap: wrap;
            .section-right-con-li {
              position: relative;
              display: flex;
              margin-right: 34px;
              padding: 28px 0;
              width: 480px;
              &::after {
                content: '';
                position: absolute;
                left: 0px;
                bottom: 0px;
                width: 480px;
                height: 0px;
                border-bottom: 1px dotted #bfbfbf;
              }
              .portrait {
                width: 130px;
                height: 175px;
                margin-right: 30px;
                cursor: pointer;
                background: #3F91DB;
                div {
                  width: 100%;
                  height: 100%;
                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }
              }
              .message {
                width: 310px;
                padding: 12px 0;
                font-size: 16px;
                line-height: 36px;
                color: #323232;
                div {
                  span {
                    &:first-of-type {
                      font-weight: bold;
                    }
                  }
                }
              }
            }
            .null {
              width: 100%;
              padding-top: 330px;
              text-align: center;
            }
          }
          .deptDuty {
            padding: 20px 0;
          }
        }
      }
    }
  }
  #background {
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
}
</style>
